<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Arrows</h3>
</div>
<div class="p-md">
  <h5 class="no-margin font-bold">Postion</h5>
  <p class="m-b-lg">[top, right, bottom, left]</p>
  <div class="row text-center">
    <div class="col-sm-3">
      <div class="panel b-a pos-rlt">
        <span class="arrow top b-white"></span>
        <div class="panel-body">
          Arrow at the top
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel b-a pos-rlt">
        <span class="arrow right b-white"></span>
        <div class="panel-body">
          Arrow at the right
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel b-a pos-rlt">
        <span class="arrow bottom b-white"></span>
        <div class="panel-body">
          Arrow at the bottom
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel b-a pos-rlt">
        <span class="arrow left b-white"></span>
        <div class="panel-body">
          Arrow at the left
        </div>
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-sm-3">
      <div class="row">
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow top pull-left b-white"></span>
            <div class="panel-body">
              pull-left
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow top pull-right b-white"></span>
            <div class="panel-body">
              pull-right
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="row">
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow right pull-top b-white"></span>
            <div class="panel-body">
              pull-top
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow right pull-bottom b-white"></span>
            <div class="panel-body">
              pull-bottom
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="row">
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow bottom pull-left b-white"></span>
            <div class="panel-body">
              pull-left
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow bottom pull-right b-white"></span>
            <div class="panel-body">
              pull-right
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="row">
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow left pull-top b-white"></span>
            <div class="panel-body">
              pull-top
            </div>
          </div>
        </div>
        <div class="col-xs-6">
          <div class="panel b-a pos-rlt">
            <span class="arrow left pull-bottom b-white"></span>
            <div class="panel-body">
              pull-bottom
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <h5 class="no-margin font-bold">Colors</h5>
  <p class="m-b-lg">b-primary[primary, info, success, warning, danger, white, light]</p>
  <div class="row text-center">
    <div class="col-sm-3">
      <div class="panel bg-primary pos-rlt">
        <span class="arrow top b-primary"></span>
        <div class="panel-body">
          b-primary
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel bg-info pos-rlt">
        <span class="arrow right b-info"></span>
        <div class="panel-body">
          b-info
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel bg-success pos-rlt">
        <span class="arrow bottom b-success"></span>
        <div class="panel-body">
          b-success
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel bg-warning pos-rlt">
        <span class="arrow left b-warning"></span>
        <div class="panel-body">
          b-warning
        </div>
      </div>
    </div>
  </div>
  <div class="row text-center">
    <div class="col-sm-3">
      <div class="panel b-a bg-light pos-rlt">
        <span class="arrow top b-light"></span>
        <div class="panel-body">
          b-light
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel bg-dark pos-rlt">
        <span class="arrow right b-dark"></span>
        <div class="panel-body">
          b-dark
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel bg-black pos-rlt">
        <span class="arrow bottom b-black"></span>
        <div class="panel-body">
          b-black
        </div>
      </div>
    </div>
    <div class="col-sm-3">
      <div class="panel bg-danger pos-rlt">
        <span class="arrow left b-danger"></span>
        <div class="panel-body">
          b-danger
        </div>
      </div>
    </div>
  </div>
  <h5 class="no-margin m-b font-bold">Code</h5>
  <div>
    <code>&lt;span class="arrow left b-white pull-left">&lt;/span></code>
  </div>
</div>